<!--  -->
<template>
  <div class=''>
    <!-- <el-button @click="addData">添加</el-button> -->
    <el-table :data="tableData" :key="keyFlag" border style="width: 100%">
      <el-table-column prop="" label="序号">
      </el-table-column>
      <el-table-column prop="" label="姓名">
      </el-table-column>
      <el-table-column prop="" label="工号">
      </el-table-column>
      <el-table-column prop="" label="部门">
      </el-table-column>
      <el-table-column prop="" label="手机">
      </el-table-column>
      <el-table-column v-for="item in nowMonthDay" :key="item" prop="" :label="`${nowMonth}/${item}`">

        <template slot-scope="scope">
          <div :class="getStyle(scope.row.state[item - 1])" @click="handleClick(scope.row, item)">{{
      getState(scope.row.state[item - 1]) }}</div>
        </template>

      </el-table-column>




    </el-table>
    <!-- <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage2"
      :page-sizes="[100, 200, 300, 400]" 
      :page-size="100" 
      layout="sizes, prev, pager, next" 
      :total="1000">
      </el-pagination>
    </div> -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <template>
        <!-- <el-radio v-model="radio" v-for="item in radioState" :key="item.label" :label="item.label">{{ item.value }}</el-radio> -->
        <el-radio-group v-model="radio">
          <el-radio v-for="item in 6" :key="item" :label="item">{{ getState(item)
            }}</el-radio>

        </el-radio-group>
        <!-- <el-radio class="radio_width" v-for="item in 6" :key="item" v-model="radio" :label="item">{{ getState(item)
          }}</el-radio> -->
        <!-- <el-radio v-model="radio" label="2">旷课</el-radio>
        <el-radio v-model="radio" label="3">迟到</el-radio>
        <el-radio v-model="radio" label="4">早退</el-radio>
        <el-radio v-model="radio" label="5">请假</el-radio>
        <el-radio v-model="radio" label="6">休息</el-radio> -->
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // tableData: [
      //   {
      //     id: 1,
      //     name: '123',
      //     schoolId: "123",
      //     state: [],
      //   },
      //   {
      //     id: 2,
      //     name: '123',
      //     schoolId: "123",
      //     state: [],
      //   }
      // ],

      radioState: [
        {
          label: '1',
          value: '正常'
        },
        {
          label: '2',
          value: '旷课'
        },
        {
          label: '3',
          value: '迟到'
        },
        {
          label: '4',
          value: '早退'
        },
        {
          label: '5',
          value: '请假'
        },
        {
          label: '6',
          value: '休息'
        },
      ],
      nowMonth: 0,
      nowMonthDay: 0,
      dialogVisible: false,
      radio: 1,
      itmeData: {},
      indexData: 1,
      keyFlag: false,
      tableData: [],

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getTableData() {
      this.$request.get('http://localhost:3003/tableData').then((res) => {
        console.log(res);
        const { data, status } = res;
        if (status == 200) {
          this.tableData = data;
          this.keyFlag = !this.keyFlag
          console.log(this.tableData, "this.tableData");
        } else {
          this.$message.error('暂无数据');
          this.tableData = [];
        }
      })
    },
    getNowMonthDay() {
      var currentDate = new Date();
      var currentY = currentDate.getFullYear();
      var currentM = currentDate.getMonth() + 1;
      var MonthDayNum = new Date(currentY, currentM, 0).getDate();
      this.nowMonth = currentM
      this.nowMonthDay = MonthDayNum
      console.log(this.nowMonth);
      console.log(this.nowMonthDay);
    },
    getState(num) {
      switch (num) {
        case 1:
          return '正常'
        case 2:
          return '旷课'
        case 3:
          return '迟到'
        case 4:
          return '早退'
        case 5:
          return '请假'
        case 6:
          return '休息'
        default:
          return '/'
      }
    },
    getStyle(num) {
      switch (num) {
        case 1:
          return 'normal'
        case 2:
          return 'truancy'
        case 3:
          return 'Late'
        case 4:
          return 'Early'
        case 5:
          return 'leave'
        case 6:
          return 'rest'
        default:
          return '/'
      }
    },

    handleClose() {
      this.dialogVisible = false
    },
    submit() {
      // this.tableData.forEach(item => {
      //   if (item.id == this.itmeData.id) {
      //     item.state[this.indexData - 1] = this.radio
      //     console.log(item, "item");
      //   }
      // })
      this.itmeData.state[this.indexData - 1] = this.radio
      this.$request.put(`http://localhost:3003/tableData/${this.itmeData.id}`, this.itmeData).then((res) => {
        if (res.status == 200) {
          this.getTableData()
          this.dialogVisible = false
        }
      })

    },
    addData() {
      this.$request.post(`http://localhost:3003/tableData`, {
        "name": "123",
        "schoolId": "123",
        "state": [1, 2, 3, 4, 5]
      }).then(() => {
      })
    },
    handleClick(row, i) {
      this.dialogVisible = true
      this.itmeData = row,
        this.indexData = i

      this.radio = this.itmeData.state[i - 1]
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNowMonthDay()
    this.getTableData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
* {
  text-align: center;
}

.page {
  margin-top: 10px;
  text-align: center
}

.radio_width {
  width: 25%;
}

.normal {
  background-color: antiquewhite;
}

.truancy {
  background-color: rgb(153, 153, 160);
  color: red;
}

.Late {
  background-color: rgb(159, 151, 159);
  color: red;
}

.Early {
  background-color: pink;
}

.leave {
  background-color: red;
}

.rest {
  background-color: green;
}
</style>